<template>
  <div class="cycle-box">

    <div class="select-bill-time">
      <p>
        <span>还款账户</span>
        <span class="manager" :class="{'active':manageShow}" @click="manageShow = !manageShow">{{ manageShow?'退出管理':'管理' }}</span>
      </p>

    </div>
    <div class="other-card-box" v-for="(item,index) in manageList" :key="index">
      <div class="left-o-card-box">
        <div class="icon-box">
          <img src="@icon/user.png" alt="">
        </div>
        <div class="left-o-u-box">
          <p>{{item.name}}</p>
          <p class="text-gray">
            <span>{{item.cardNum | formatCard}}</span>
            <span>{{item.bankName}}</span>
          </p>
        </div>
      </div>
      <div class="delete" v-if="manageShow" @click="deleteFlag = !deleteFlag">删除</div>

    </div>
    <!--    温馨提示-->
    <div class="tips">
      <p>温馨提示</p>
      <p>1.手机银行信用卡还款无需在网点柜面开通协议，目前仅支持农业银行信用卡还款服务，还款成功后实时恢复信用卡额度。还款币种支持人民币、美元（现钞）。</p>
      <p>2.若您存在美元账单，以上“本期剩余应还”以还款入账后的实际金额为准。</p>
      <div class="button" v-if="!manageShow" @click="payNow()">提交</div>
      <div class="button" v-else @click="_goPage('addOtherCard')">新增还款人账户</div>
    </div>
    <!--  还款约定  -->
    <van-popup
        v-model="infoConfirmFlag"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ 'min-height': '17%' }"
    >
      <div class="info-list">
        <h3>还款详情</h3>
        <p>
          <span>付款账户</span>
          <span>{{ cardNum |  formatCard }}</span>
        </p>
        <p>
          <span>还款账户</span>
          <span>{{ cardNum |  formatCard }}</span>
        </p>
        <p>
          <span>还款金额</span>
          <span>¥{{ total }}</span>
        </p>
      </div>
      <div class="staging-box" @click="_goPage('paymentSuccess',{type:'otherPayment',cardNum:cardNum})">确定</div>

    </van-popup>
    <!--  删除确定-->
    <van-popup
        v-model="deleteFlag"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ 'min-height': '17%' }"
    >
      <div class="info-list">
        <h3>确认删除</h3>
        <p>
          <span>姓名</span>
          <span>{{ cname }}</span>
        </p>
        <p>
          <span>卡号</span>
          <span>{{ cardNum |  formatCard }}</span>
        </p>
      </div>
      <div class="staging-box" @click="_goPage('paymentSuccess',{type:'otherDelete',cardNum:cardNum})">确定</div>

    </van-popup>
  </div>
</template>

<script>
import {Random} from "mockjs";
import {globalMethods} from "../common/mixins";


export default {
  name: "billCycle",
  mixins: [globalMethods],
  data() {
    return {
      billSelect: false,
      emailValue: '',
      billCardFlag: false,
      manageShow:false,
      infoConfirmFlag:false,
      deleteFlag:false,
      cname:Random.cname(),
      cardNum: Random.string("number", 12),
      total: Random.natural(10, 100),
      residue: Random.natural(10, 100),
      balance: Random.natural(10, 100),
      manageList: [
        {
          name: Random.cname(),
          cardNum: Random.string("number", 12) ,
          bankName: '农业银行',
        }, {
          name: Random.cname(),
          cardNum: Random.string("number", 12),
          bankName: '农业银行',
        }, {
          name: Random.cname(),
          cardNum: Random.string("number", 12),
          bankName: '农业银行',
        }, {
          name: Random.cname(),
          cardNum: Random.string("number", 12),
          bankName: '农业银行',
        },
      ]
    }
  },
  methods: {
    getCamera() {
      console.log('调起相机')
    },
    getUser() {
      console.log('拉起通讯录')
    },
    payNow(){
      this.infoConfirmFlag = !this.infoConfirmFlag
    }
  }
}
</script>

<style lang="stylus" scoped>
.info-list
  h3
    font-weight: 400
    display flex
    align-items center
    justify-content center
    height 100px
    color #666
    border-bottom 1px solid #E6E6E6

  p
    margin 0 30px
    display flex
    align-items center
    height 90px
    color #333333
    font-size 32px
    border-bottom 1px solid #E6E6E6
    justify-content space-between
  .bank-card-box
    .item
      border-bottom 1px solid #ededed
      .card-right__logo
        width 48px
.dropdown-menu
  top 0

.other-card-box
  display flex
  width 100%
  align-items center
  background #fff
  .left-o-card-box
    display flex
    margin-left 30px
    height 140px
    border-bottom 2px solid #efefef
    flex 1
    .icon-box
      display flex
      width 40px
      height 40px
      margin-top 35px
      padding-right 16px
      img
        width 100%
        height 100%
    .left-o-u-box
      display flex
      flex-direction column
      justify-content space-between
      padding 35px 0
      span
        margin-right 15px
      .text-gray
        font-size 28px
  .delete
    color #FFA900
    margin-right 30px
    height 140px
    display flex
    align-items center
    border-bottom 2px solid #efefef

.line-box
  height 20px
  background #F7F7F7

.installment-item
  background #fff
  display flex
  flex-direction column
  font-size 32px
  min-height 90px
  padding 0 30px
  color #333

  .item-box
    height 90px
    display flex
    justify-content space-between
    align-items center
    border-bottom 1px solid #E6E6E6

    .item-right
      display flex

      img
        width 48px
        height 100%

    .right-text
      color #666666

    .discount-box
      margin-left 16px
      font-size 26px
      color #00B893
      display flex
      height 40px
      padding 0 11px
      background #FFFFFF
      border 2px solid #00B893
      border-radius 20px
      align-items center
      justify-content center

  .balance-box
    font-size 28px
    display flex
    align-items center
    justify-content flex-end
    height 64px
    color #666666
    padding 18px 0

.protocol-box
  display flex
  align-items center
  padding 30px 34px
  font-size 28px
  background #f7f7f7

.tips
  background #fff
  font-size 28px
  padding 30px

  p
    line-height 1.5

.staging-box
  display flex
  width 686px
  height 88px
  background #FFA900
  border-radius 8px
  color #fff
  font-size 36px
  align-items center
  justify-content center
  margin 30px auto

/deep/ .van-icon-camera-o
  display flex
  align-items center
  justify-content center
  width 36px
  height 36px
  background url('../assets/icon/camera.png') no-repeat center
  background-size contain

/deep/ .van-icon-psyUser-o
  display flex
  align-items center
  justify-content center
  width 36px
  height 36px
  background url('../assets/icon/otherUser.png') no-repeat center
  background-size contain

/deep/ .van-cell
  padding 0
  color #333333
  font-size 32px

.cycle-box
  display flex
  width 100%
  flex-direction column
  background #F7F7F7
  min-height 100vh
  color #333

  .bank-card-box
    position relative
    z-index 1000
    background #fff

    .item
      display flex
      align-items center
      margin 0 27px 0 33px
      height 90px
      color #333333
      border-bottom 2px solid #efefef

      .span-text
        //padding 0 16px
        flex 1

        &.active
          color #07B7A0

  .card-right__logo
    width 48px
    height 48px
    display flex
    justify-content center
    margin-left 16px

    img
      width 100%
      height 100%

    .img2
      width 22px
      height 16px

  .select-bill-time
    background #fff
    display flex
    justify-content space-between
    padding 0 30px
    align-items center
    .manager
      &.active
        border-color #FFA900
        color #FFA900
    p
      display flex
      align-items center
      justify-content space-between
      width 100%
      height 90px
      border-bottom 2px solid #efefef

      span
        &:last-of-type
          display flex
          width 120px
          height 60px
          border 1px solid #333333
          border-radius 10px
          font-size 26px
          justify-content center
          align-items center

.bill-box
  background #fff

.amount-list
  h3
    font-weight: 400
    display flex
    align-items center
    justify-content center
    height 100px
    color #666
    border-bottom 1px solid #E6E6E6

  .cycle-list
    color #333333
    font-size 32px

    .cycle-time
      color #666

  .time
    display flex
    align-items center
    justify-content space-between
    padding-right 30px

    span
      &:last-of-type
        color #666

  p
    margin-left 32px
    border-bottom 1px solid #E6E6E6
    display flex
    align-items center
    height 90px
    color #333333
    font-size 32px

.tips
  padding 30px
  font-size 28px

  p
    &:last-of-type
      padding-bottom 30px

  .button
    display flex
    width 686px
    height 88px
    background #FFA900
    border-radius 8px
    color #fff
    font-size 36px
    align-items center
    justify-content center
    margin 30px auto
</style>
